<template>
  <div>
    <div class="title">
      <div class="father">{{ form.title }}</div>
      <div class="child">-- {{ form.location }} {{form.level}}级地震</div>
    </div>
    <el-button type="success" @click="openUpdateDialog" style="margin-left: 5%">编辑页面</el-button>
    <el-carousel :interval="4000" type="card" height="320px" style="width: 90%;margin: 0 auto">
      <el-carousel-item v-if="form.images.length !== 0" v-for="item in form.images" :key="item">
        <el-image :src="item.url" style="border-radius: 15px"></el-image>
      </el-carousel-item>
      <el-carousel-item v-else v-for="item in 6" :key="item">
        <h3 class="medium">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
    <p v-for="(paragraph, index) in paragraphs" :key="index" class="text">{{ paragraph }}</p>
    <div style="margin: 25px 5%;font-size: 20px;width: 100px;padding: 5px 10px;background-color: #00afff;border-radius: 15px">
        救灾现场
    </div>
    <div style="margin: 0 auto">
      <ShowVideo/>
    </div>
    <el-dialog :visible.sync="imageUploadDialog" title="上传轮播图">
      <el-form label-width="80px">
        <el-form-item label="标题" prop="location">
          <el-input v-model="updateForm.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="轮播图">
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="(file, fileList) => { handleRemove(file, fileList) }"
            :on-success="handleCoverSuccess"
            :file-list="fileList"
            list-type="picture">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="文本" prop="depth">
          <el-input
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4}"
            placeholder="请输入内容"
            v-model="updateForm.body"
          >
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="imageUploadDialog = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.text {
  text-indent: 2em; /* 设置段落开头空两格 */
  margin: 10px auto;
  width: 80%;
}
.title {
  .father {
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
  }
  .child {
    font-size: 12px;
    font-weight: normal;
    color: #99A9BF;
    text-align: center;
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
<script>
import {getDistrack, updateDistrack} from "@/api/distrack/distrack";
import ShowVideo from '@/views/video/show.vue'
import {getToken} from "@/utils/auth";

export default {
  components: {
    ShowVideo
  },
  name: "DistrackShow",
  data() {
    return {
      uploadUrl:  process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址,
      headers: {
        Authorization: "Bearer " + getToken()
      },
      form: {},
      updateForm: {
        title: '',
        images: [],
        body: ''
      },
      fileList: [],
      imageUploadDialog: false,
      id: '',
      text: ``,
      paragraphs: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getById();
  },
  mounted() {

  },
  methods: {
    openUpdateDialog() {
      this.resetForm()
      this.imageUploadDialog = true
    },
    resetForm() {
      this.updateForm.id = this.id
      this.updateForm.title = this.form.title
      this.fileList = this.form.images ? this.form.images.slice() : []
      console.log(this.fileList)
      this.updateForm.body = this.form.body
    },
    handleCoverSuccess(response) {
      this.fileList.push(response.data)
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePreview(file) {

    },
    async getById() {
      await getDistrack(this.id).then(response => {
        this.form = response.data;
        this.form.images = response.data.images ? JSON.parse(response.data.images) : [];
        this.paragraphs = this.form.body.split('\n').map(paragraph => paragraph.trim());
      })
    },
    async submitForm() {
      console.log(this.fileList)
      const imagesArray = this.fileList.map(image => ({
        name: image.name,
        url: image.url
      }));
      this.updateForm.images = JSON.stringify(imagesArray)
      await updateDistrack(this.updateForm).then(response => {
        this.$modal.msgSuccess("修改成功");
      });
      this.imageUploadDialog = false
      await this.getById()
      this.resetForm()
    }
  }
};
</script>
